<template>
  <div class="min-h-screen flex items-center justify-center relative overflow-hidden">
    <!-- Rainbow Background -->
    <div class="absolute inset-0 bg-gray-900 opacity-90 z-0"></div>

    <!-- Login Card -->
    <div class="relative z-10 bg-gray-900/80 backdrop-blur-md rounded-2xl shadow-2xl p-8 w-full max-w-md mx-4 glow-effect">
      <!-- Logo -->
      <div class="flex justify-center mb-8">
        <img src="../assets/img/logo-login.png" class="h-12" alt="Flox">
      </div>

      <!-- Title -->
      <h1 class="text-3xl font-bold mb-6 text-center">
        <span class="gradient-text">用户登录</span>
      </h1>

      <!-- Login Form -->
      <form class="space-y-6" @submit.prevent="login">
        <div>
          <label for="username" class="block text-gray-300 mb-2">用户名</label>
          <div class="relative">
            <input
              id="username"
              type="text"
              v-model="username"
              placeholder="请输入用户名"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300"
              autofocus
            >
          </div>
        </div>

        <div>
          <label for="password" class="block text-gray-300 mb-2">密码</label>
          <div class="relative">
            <input
              id="password"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              class="w-full bg-gray-800/60 text-white rounded-lg py-3 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300"
            >
          </div>
        </div>

        <div class="flex items-center justify-between">
          <a
            @click="toRegister"
            class="text-purple-400 hover:text-purple-300 transition-colors duration-300 cursor-pointer"
          >
            没有账号？点击注册
          </a>
        </div>

        <button
          type="submit"
          class="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-lg hover:from-purple-700 hover:to-pink-600 transition-all duration-300 shadow-lg transform hover:scale-105 focus:outline-none"
          :class="errorShake ? 'shake-horizontal shake-constant' : ''"
        >
          登录
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import config from '@/config';

export default {
  data() {
    return {
      username: '',
      password: '',
      error: false,
      errorShake: false,
      errorMessage: ''
    }
  },

  mounted() {
    document.body.classList.add('dark');
  },

  methods: {
    async login() {
      try {
        const response = await axios.post(`${config.url}doLogin`, {
          userName: this.username,
          password: this.password
        });
        console.log('Response:', response);

        if (response.data.code === 200) {
          const jwtToken = response.data.data;
          localStorage.setItem('jwt', jwtToken);
          this.$router.push('/');
        } else {
          this.error = true;
          this.errorMessage = response.data?.message || '登录失败';
          alert(response.data.msg);
        }
      } catch (error) {
        console.error('Error:', error);
        this.error = true;
        this.errorMessage = error.response?.data?.message || '登录时发生错误';
        this.errorShake = true;
        setTimeout(() => {
          this.errorShake = false;
        }, 500);
      }
    },
    toRegister() {
      this.$router.push('/userRegister');
    }
  }
}
</script>

<style scoped>
.shake-horizontal {
  animation: shake-horizontal 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes shake-horizontal {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
</style>
